<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">公司名称</label>
      <div class="layui-input-block">
        <input type="company" name="company" placeholder="请输入公司名称" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item ">
      <label class="layui-form-label">分钟数总额</label>
      <div class="layui-input-block">
        <input type="fzsze" name="fzsze" placeholder="请输入分钟数总额" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">剩余分钟数</label>
      <div class="layui-input-block">
        <input type="syfzs" name="syfzs" placeholder="请输入剩余分钟数" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">拨打次数</label>
      <div class="layui-input-block">
        <input type="bscs" name="bscs" placeholder="请输入拨打次数" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">接通数</label>
      <div class="layui-input-block">
        <input type="jts" name="jts" placeholder="请输入接通数" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">接通率</label>
      <div class="layui-input-block">
        <input type="jtl" name="jtl" placeholder="请输入接通率" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">计费时长(分)</label>
      <div class="layui-input-block">
        <input type="jfsc" name="jfsc" placeholder="请输入计费时长(分)" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">通话时长</label>
      <div class="layui-input-block">
        <input type="thsc" name="thsc" placeholder="请输入通话时长" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">平均通话时长</label>
      <div class="layui-input-block">
        <input type="pjthsc" name="pjthsc" placeholder="请输入平均通话时长" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">销售</label>
      <div class="layui-input-block">
        <input type="xs" name="xs" placeholder="请输入销售" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">代理</label>
      <div class="layui-input-block">
        <input type="dl" name="dl" placeholder="请输入代理" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">线路</label>
      <div class="layui-input-block">
        <input type="line" name="line" placeholder="请输入线路" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">部门名称</label>
      <div class="layui-input-block">
        <input type="orgname" name="orgname" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">时间</label>
      <div class="layui-input-block">
        <input type="date" name="date" placeholder="请输入时间" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="tHwtj:list">
    <div class="layui-form-item">
        <div class="layui-input-inline layui-form">
            <input type="text" name="date" class="layui-input" id="test-range2" placeholder="请选择时间范围">
        </div>
        <div class="layui-input-inline layui-form" id="corporatenameSCid" hidden style="display: none;">
            <select id="corporatenameSC" lay-search="">
                <option value="">请选择公司名称</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" id="salesnameSCid" hidden style="display: none;">
            <select id="salesnameSC">
                <option value="">请选择销售</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" id="dlSCid" hidden style="display: none;">
            <select id="dlSC">
                <option value="">请选择代理</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" id="lineSCid" hidden style="display: none;">
            <select id="lineSC">
                <option value="">请选择线路</option>
            </select>
        </div>
      <div class="layui-input-inline ">
        <button class="layui-btn"  id="search">查询</button>
<!--               <button class="layui-btn"   id="export">导出全部</button>-->
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
<!--    <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="tHwtj:add">添加</button>-->
<!--    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="tHwtj:delete">删除</button>-->
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="tHwtj:update">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="tHwtj:delete">删除</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");

  userInfo = CoreUtil.getData("userInfo");
  userRoles = CoreUtil.getData("userRoles");
  userDepts = CoreUtil.getData("userDepts");
  sysRolesList = CoreUtil.getData("sysRolesList");
  userSysUsers = CoreUtil.getData("userSysUsers");
  hwtj = CoreUtil.getData("hwtj");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  var treetable;
  //根据部门区分表格
  var sysRoleName = userInfo.sysRoleName;
  layui.config({
      base: '/layui-ext/'
  }).extend({
      treetable: 'treetable-lay/treetable'
  }).use(['table', 'layer', 'laydate','treetable', 'tree'], function () {
      let data = new Date();
      let year = data.getFullYear();
      let month = data.getMonth() + 1;
      let day = data.getDate();
      var eDate =  year + '-' + month + '-' + day;
      var sDate =  year + '-' + month + '-' + "01";
      var dateValue = sDate + ' - ' + eDate;
      laydate.render({
          elem: '#test-range2' ,//指定元素
          range: true,
          value: dateValue
      });
      info();
  });
  var info  = function () {

      // if ((sysRoleName.indexOf("管理员")>-1 || sysRoleName.indexOf("代理")>-1)) {
      //加载表格
      tableIns();
      var tHwtj_infoData = CoreUtil.getData("tHwtj_infoData");
      if (!!tHwtj_infoData) {
          var data = tHwtj_infoData;
          //请选择公司、请选择销售、请选择代理、请选择线路;
          //公司
          var corporatenameSC = $("#corporatenameSC");
          $.each(data.company, function (index, item) {
              if (!!item) {
                  corporatenameSC.append("<option value=" + item + ">" + item + "</option>");
              }
          });
          //销售
          var salesnameSC = $("#salesnameSC");
          $.each(data.xs, function (index, item) {
              if (!!item) {
                  salesnameSC.append("<option value=" + item + ">" + item + "</option>");
              }
          });
          //代理
          var belongstoId = $("#dlSC");
          $.each(data.dl, function (index, item) {
              belongstoId.append("<option value=" + item + ">" + item + "</option>");
          });

          //线路
          var lineSC = $("#lineSC");
          $.each(data.line, function (index, item) {
              lineSC.append("<option value=" + item + ">" + item + "</option>");
          });
          form.render("select");
      } else {
          CoreUtil.sendGet("/tHwtj/infoData/", null, function (res) {
              var code = res.code;
              var data = res.data;
              //请选择公司、请选择销售、请选择代理、请选择线路;
              if (code == 0) {
                  CoreUtil.setData("tHwtj_infoData",res.data);
                  //公司
                  var corporatenameSC = $("#corporatenameSC");
                  $.each(data.company, function (index, item) {
                      if (!!item) {
                          corporatenameSC.append("<option value=" + item + ">" + item + "</option>");
                      }
                  });
                  //销售
                  var salesnameSC = $("#salesnameSC");
                  $.each(data.xs, function (index, item) {
                      if (!!item) {
                          salesnameSC.append("<option value=" + item + ">" + item + "</option>");
                      }
                  });
                  //代理
                  var belongstoId = $("#dlSC");
                  $.each(data.dl, function (index, item) {
                      belongstoId.append("<option value=" + item + ">" + item + "</option>");
                  });

                  //线路
                  var lineSC = $("#lineSC");
                  $.each(data.line, function (index, item) {
                      lineSC.append("<option value=" + item + ">" + item + "</option>");
                  });
                  form.render("select");
              }
          });
      }

      // }

  };

  //加载表格
  var tableIns = function () {
      var range =  $('#test-range2').val().replace(/ - /g,' 至 ');
      var split = range.split(' 至 ');
      //这里以搜索为例
      var whereData = { //设定异步数据接口的额外参数，任意设
          startDate: split[0]+" 00:00:00",
          endDate: split[1]+" 23:59:59",
      }


      if (!tableIns1 && (sysRoleName.indexOf("管理员")>-1 || sysRoleName.indexOf("代理")>-1))    {
          //查询项走
          $("#corporatenameSCid").show();
          $("#salesnameSCid").show();
          $("#dlSCid").show();
          $("#lineSCid").show();
          //加载table
          tableIns1 = table.render({
              elem: '#showTable'
              , contentType: 'application/json'
              , headers: {"authorization": token}
              , where: whereData
              , page: true //开启分页
              , url: '/tHwtj/listByPage' //数据接口
              , method: 'POST'
              , totalRow: true
              , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                  return {
                      "code": res.code, //解析接口状态
                      "msg": res.msg, //解析提示文本
                      "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                      "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                  }
              }
              , cols: [
                  [
                      //公司名称、分钟数总额、剩余分钟数、拨打次数、接通数、接通率、计费时长、通话时长、平均通话时长
                      // {type: 'checkbox', fixed: 'left'},
                      {title: "序号",type: "numbers",totalRowText:"合计"},
                      {title: "序号",type: "numbers", hide: true},
                      {field: 'company', title: '公司名称', sort: true,align: 'center',width:"20%"},
                      {field: 'fzsze', title: '分钟数总额',templet: function (item) {
                              if (!!item.fzsze) {
                                  return item.fzsze;
                              } else {
                                  return 0;
                              }
                          }, sort: true,align:"center",  totalRow: true},
                      {field: 'syfzs', title: '剩余分钟数',templet: function (item) {
                              if (!!item.syfzs) {
                                  return item.syfzs;
                              } else {
                                  return 0;
                              }
                          }, sort: true,align:"center",  totalRow: true},
                      {field: 'bscs', title: '拨打次数',templet: function (item) {

                              if (!!item.bscs) {
                                  return item.bscs;
                              } else {
                                  return 0;
                              }
                          }, sort: true,align:"center",  totalRow: true},
                      {field: 'jts', title: '接通数',templet: function (item) {
                              if (!!item.jts) {
                                  return item.jts;
                              } else {
                                  return 0;
                              }
                          }, sort: true,align:"center",  totalRow: true},
                      {field: 'jtl', title: '接通率',templet: function (item) {
                              if (!!item.jtl) {
                                  return item.jtl +"%";
                              } else {
                                  return 0;
                              }
                          }, sort: true,align:"center"},
                      {field: 'jfsc', title: '计费时长(分)',templet: function (item) {
                              if (!!item.jfsc) {
                                  return item.jfsc ;
                              } else {
                                  return 0;
                              }
                          }, sort: true,align:"center",  totalRow: true},
                      {field: 'thsc', title: '通话时长',templet: function (item) {
                              if (!!item.thsc) {
                                  return item.thsc ;
                              } else {
                                  return 0;
                              }
                          }, sort: true,align:"center"},
                      {field: 'pjthsc', title: '平均通话时长',templet: function (item) {
                              if (!!item.pjthsc) {
                                  return item.pjthsc + "秒";
                              } else {
                                  return 0;
                              }
                          }, sort: true,align:"center"},
                      // {field: 'xs', title: '销售', sort: true,align:"center",  hide: true},
                      // {field: 'dl', title: '代理', sort: true,align:"center",  hide: true},
                      // {field: 'line', title: '线路', sort: true,align:"center",  hide: true},
                      // {field: 'orgname', title: '部门名称', sort: true,align:"center",  hide: true},
                      // {field: 'date', title: '时间', sort: t#test-range2rue,align:"center",  hide: true},
                      // {width: 120, toolbar: "#tool", title: '操作', hide: true}
                  ]
              ]
              , toolbar: '#toolbar'
          });
          $('body').on('click','#search', function(){
              debugger
              var range =  $('#test-range2').val().replace(/ - /g,' 至 ');
              var split = range.split(' 至 ');
              //这里以搜索为例
              tableIns1.reload({
                  where: { //设定异步数据接口的额外参数，任意设
                      startDate: split[0]+" 00:00:00",
                      endDate: split[1]+" 23:59:59",
                      company: $("#corporatenameSC").val(),
                      xs: $("#salesnameSC").val(),
                      dl: $("#dlSC").val(),
                      line: $("#lineSC").val()
                  }
                  , page: {
                      curr: 1 //重新从第 1 页开始
                  }
              });
              return false;
          });
      } else {
          var reloadTreeTable = function () {
              var range =  $('#test-range2').val().replace(/ - /g,' 至 ');
              var split = range.split(' 至 ');
              var parm = {
                  startDate: split[0]+" 00:00:00",
                  endDate: split[1]+" 23:59:59"
              }
              CoreUtil.sendPost("/tHwtj/listByPage", parm, function (res) {
                  renderTable(res.data);
              });
          };
          reloadTreeTable();
          treetable = layui.treetable;
          var renderTable = function (data) {
              //加载table
              treetable.render({
                  // 渲染表格
                  data: data,
                  treeColIndex: 1, // 树形图标显示在第几列
                  treeSpid: 0, // 最上级的父级id
                  treeIdName: 'id', // id字段的名称
                  treePidName: 'pid', // pid字段的名称
                  treeDefaultClose: false, // 是否默认折叠
                  treeLinkage: true, // 父级展开时是否自动展开所有子级
                  elem: '#showTable', // 表格id
                  page: false, // 树形表格一般是没有分页的
                  totalRow: true
                  , cols: [
                      [
                          //公司名称、分钟数总额、剩余分钟数、拨打次数、接通数、接通率、计费时长、通话时长、平均通话时长
                          {title: "序号",type: "numbers",totalRowText:"合计"},
                          {field: 'orgname', title: '部门名称', sort: true},
                          {field: 'bscs', title: '拨打次数',templet: function (item) {
                                  if (!!item.bscs) {
                                      return item.bscs;
                                  } else {
                                      return 0;
                                  }
                              }, sort: true,align:"center"},
                          {field: 'jts', title: '接通数',templet: function (item) {
                                  if (!!item.jts) {
                                      return item.jts;
                                  } else {
                                      return 0;
                                  }
                              }, sort: true,align:"center"},
                          {field: 'jtl', title: '接通率',templet: function (item) {
                                  if (!!item.jtl) {
                                      return item.jtl +"%";
                                  } else {
                                      return 0;
                                  }
                              }, sort: true,align:"center"},
                          {field: 'jfsc', title: '计费时长(分)',templet: function (item) {
                                  if (!!item.jfsc) {
                                      return item.jfsc ;
                                  } else {
                                      return 0;
                                  }
                              }, sort: true,align:"center"},
                          {field: 'thsc', title: '通话时长',templet: function (item) {
                                  if (!!item.thsc) {
                                      return item.thsc ;
                                  } else {
                                      return 0;
                                  }
                              }, sort: true,align:"center"},
                          {field: 'pjthsc', title: '平均通话时长',templet: function (item) {
                                  if (!!item.pjthsc) {
                                      return item.pjthsc + "秒";
                                  } else {
                                      return 0;
                                  }
                              }, sort: true,align:"center"},
                      ]
                  ]
                  , toolbar: '#toolbar'
              });
          };
          $('body').on('click','#search', function(){
              reloadTreeTable();
              return false;
          });
      }


  };


  //执行查询
  function search() {
      var range =  $('#test-range2').val().replace(/ - /g,' 至 ');
      var split = range.split(' 至 ');
      //这里以搜索为例
      tableIns1.reload({
          where: { //设定异步数据接口的额外参数，任意设
              startDate: split[0]+" 00:00:00",
              endDate: split[1]+" 23:59:59",
              company: $("#corporatenameSC").val(),
              xs: $("#salesnameSC").val(),
              dl: $("#dlSC").val(),
              line: $("#lineSC").val()
          }
          , page: {
              curr: 1 //重新从第 1 页开始
          }
      });
  };
</script>